<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<script id="courseoffering-info-tmpl" type="text/x-handlebars-template">
		{{#courseofferings}}
			<li class="col-md-3">
				
				<div class ="thumbnail">
					<img class="img-galery" alt="" src="{{img}}" style="width: 150px; height: 150px;">
					<div class="caption">
						<h5>{{title}}</h5>
                        <p class="description" style="height:50px">
                            {{description}}
		                </p>
		                <div class="co-rating" data-rating="{{rating}}">
		                </div>
						<div class="controls">
							<button id ="{{code}}" class="btn-success btn courseoffering-details" style="margin-top:5px">
								View
							</button>
						</div>
					</div>
				</div>	
			</li>
			{{/courseofferings}}
	</script>

	<script type="text/javascript">
		$(document).ready(function() {
				CourseMgtController.getPublicCourseOfferings();
			});
			
			$(".courseoffering-details").live('click', function(event) {
			  CourseMgtController.getCourseOfferingDetails(this.id);
			});
            
            $(".description").on("hover", function(event){
                alert("ok");
            });
	</script>


</head>

<body>
	<div class="container">
		<div class="row">
			<ul id="courseoffering-list" class="list-unstyled row">
			</ul>
		</div>
	</div>
</body>

</html>
